<template>
  <div class="user">
        <el-row class="topw">
            <el-col :span="24">
                <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>咨询管理</el-breadcrumb-item>
                <el-breadcrumb-item>编辑招商信息</el-breadcrumb-item>
                </el-breadcrumb>
            </el-col>
        </el-row>
        <div style="height:20px"></div>
        <el-form :model="addForm" label-width="" :rules="rules" ref="addUserForm">
          <el-form-item label="标题:" prop="title" >
          <el-input v-model="addForm.title" auto-complete="off" ></el-input>
        </el-form-item>
            <el-form-item label="" prop="content">
            <vue-ueditor-wrap v-model="addForm.content" :config="myConfig" @beforeInit="addCustomButtom" :key="1"></vue-ueditor-wrap>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="addDialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addUserSubmit('addUserForm')">确 定</el-button>
        </div>
        
    </div>
</template>

<script>
import VueUeditorWrap from '../../components/vue-ueditor-wrap.vue';
  import {
      recruitmentlist,
      editrecruitment,
      PHPURL
  } from '@/api'
  export default {
      components: {
    VueUeditorWrap
  },
    data() {
      return {
          msg: '',
      myConfig: {
        autoHeightEnabled: false,
        initialFrameHeight: 300,
        initialFrameWidth: '100%',
        UEDITOR_HOME_URL: '/static/UEditor/',
        serverUrl: PHPURL
      },
        imageUrl: '',
        fileList: [],
        newsList: [],
        total: 0,
        picture:"",
        pagesize: 10,
        title:"",
        pagenum: 1,
        addDialogFormVisible: false,
        addForm: {
          title: '',
          content: '',
          recruitmentInformationId:""
        },
        editDialogFormVisible: false,
        editForm: {
          title: '',
          content: '',
          publishId:""
        },
        grantDialogFormVisible: false,
        grantForm: {},
        roleList: [],
        roleId: '',
        // 添加用户的表单验证
        rules: {
          username: [{
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }],
          password: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }],
          enterpriseName: [{
            required: true,
            message: '请输入企业名称',
            trigger: 'blur'
          }]
        }
      }
    },
    created() {
      this.initList()
    },
    methods: {
        // 添加自定义按钮
    addCustomButtom (editorId) {
      window.UE.registerUI('test-button', function (editor, uiName) {
        // 注册按钮执行时的 command 命令，使用命令默认就会带有回退操作
        editor.registerCommand(uiName, {
          execCommand: function () {
            editor.execCommand('inserthtml', `<span>这是一段由自定义按钮添加的文字</span>`);
          }
        });
        // 创建一个 button
        var btn = new window.UE.ui.Button({
          // 按钮的名字
          name: uiName,
          // 提示
          title: '鼠标悬停时的提示文字',
          // 需要添加的额外样式，可指定 icon 图标，图标路径参考常见问题 2
          cssRules: "background-image: url('/test-button.png') !important;background-size: cover;",
          // 点击时执行的命令
          onclick: function () {
            // 这里可以不用执行命令，做你自己的操作也可
            editor.execCommand(uiName);
          }
        });
        // 当点到编辑内容上时，按钮要做的状态反射
        editor.addListener('selectionchange', function () {
          var state = editor.queryCommandState(uiName);
          if (state === -1) {
            btn.setDisabled(true);
            btn.setChecked(false);
          } else {
            btn.setDisabled(false);
            btn.setChecked(state);
          }
        });
        // 因为你是添加 button，所以需要返回这个 button
        return btn;
      }, 0 /* 指定添加到工具栏上的哪个位置，默认时追加到最后 */, editorId /* 指定这个 UI 是哪个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮 */);
    },
    // 添加自定义弹窗
    addCustomDialog (editorId) {
      window.UE.registerUI('test-dialog', function (editor, uiName) {
        // 创建 dialog
        var dialog = new window.UE.ui.Dialog({
          // 指定弹出层中页面的路径，这里只能支持页面，路径参考常见问题 2
          iframeUrl: '/customizeDialogPage.html',
          // 需要指定当前的编辑器实例
          editor: editor,
          // 指定 dialog 的名字
          name: uiName,
          // dialog 的标题
          title: '这是一个自定义的 Dialog 浮层',
          // 指定 dialog 的外围样式
          cssRules: 'width:600px;height:300px;',
          // 如果给出了 buttons 就代表 dialog 有确定和取消
          buttons: [
            {
              className: 'edui-okbutton',
              label: '确定',
              onclick: function () {
                dialog.close(true);
              }
            },
            {
              className: 'edui-cancelbutton',
              label: '取消',
              onclick: function () {
                dialog.close(false);
              }
            }
          ]
        });
        // 参考上面的自定义按钮
        var btn = new window.UE.ui.Button({
          name: 'dialog-button',
          title: '鼠标悬停时的提示文字',
          cssRules: `background-image: url('/test-dialog.png') !important;background-size: cover;`,
          onclick: function () {
            // 渲染dialog
            dialog.render();
            dialog.open();
          }
        });
        return btn;
      }, 0 /* 指定添加到工具栏上的那个位置，默认时追加到最后 */, editorId /* 指定这个UI是哪个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮 */);
    },
      handleAvatarSuccess(res, file) {
        console.log(res)
        console.log(file)
        this.imageUrl = URL.createObjectURL(file.raw);
        this.addForm.picture = res.data.targetName
      },
      edithandleAvatarSuccess(res, file) {
        console.log(res)
        console.log(file)
        this.imageUrl = URL.createObjectURL(file.raw);
        this.editForm.picture = res.data.targetName
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.pagesize = val
        this.initList()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`)
        this.pagenum = val
        this.initList()
      },
      initList() {
        this.loading = true
        recruitmentlist({
          params: {
            recruitmentInformationId:'b0dd099a-a7b2-4d30-a40f-f36c1d29045b'
          }
        }).then(res => {
          console.log(res)
          this.addForm.title = res.data.content[0].title
          this.addForm.content = res.data.content[0].content
          this.addForm.recruitmentInformationId = res.data.content[0].recruitmentInformationId
          this.loading = false
        })
      },
      // 编辑用户提交
      addUserSubmit(formName) {
        this.$refs[formName].validate(valide => {
          if (valide) {
            editrecruitment(this.addForm).then(res => {
              console.log(res)
              if (res.status === 0) {
                this.$message({
                  type: 'success',
                  message: '编辑成功'
                })
                this.editDialogFormVisible = false
                this.initList()
              } else {
                this.$message({
                  type: 'warning',
                  message: res.message
                })
              }
            })
          }
        })
      },
    }
  }

</script>
<style lang="scss" scoped>
  .user {
    .margin-20 {
      margin: 20px 0;
    }
    .el-form-item__content{
    width: 80%;
}
    .preview{
    min-height: 300px;
    width: 100%;
    }
    .search-input {
      width: 300px;
    }
    .page {
      padding: 5px 0;
      background-color: #D3DCE6;
    }
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

</style>
